<template>
  <div class="main">
    <div class="newHeaderBox" v-if="show">
      <div class="contentBoix">
        <img
          class="topImg"
          @click="handlePush('/home', 0)"
          src="@/assets/image/header/logo.png"
          alt=""
        />
        <div class="banner">
          <div class="toptitle">
            <div
              class="blacktitle"
              :class="activeClass == 0 ? 'activeClass' : ''"
              @click="handlePush('/home', 0)"
            >
              {{ homeCd[0].value }}
            </div>
            <div
              class="blacktitle"
              :class="activeClass == 1 ? 'activeClass' : ''"
              @click="handlePush('/commodity', 1)"
            >
              {{ homeCd[1].value }}
            </div>
            <div
              class="blacktitle"
              :class="activeClass == 2 ? 'activeClass' : ''"
              @click="handlePush('/seasonnew', 2)"
            >
              {{ homeCd[2].value }}
            </div>
            <div
              class="blacktitle"
              :class="activeClass == 3 ? 'activeClass' : ''"
              @click="handlePush('/seasonselling', 3)"
            >
              {{ homeCd[3].value }}
            </div>
            <div
              @click="handlePush('/live', 4)"
              style="
                font-family: PingFang SC;
                font-size: 16px;
                font-weight: 900;
                color: #4479fd;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
              "
              :class="activeClass == 4 ? 'activeClass3' : ''"
            >
              <img
                src="../../static/Imgs/tv.png"
                alt=""
                style="margin-right: 0.08rem; cursor: pointer"
              />
              {{ homeCd[4].value }}
            </div>
            <div
              style="
                font-family: PingFang SC;
                font-size: 16px;
                font-weight: bold;
                color: #dccd20;
                cursor: pointer;
                font-style: italic;
              "
              :class="activeClass == 5 ? 'activeClass2' : ''"
              @click="handlePush('/integrity', 5)"
            >
              <!-- <img
              src="../../static/Imgs/cxsj.png"
              style="width: 70px"
              alt=""
            /> -->
              {{ homeCd[5].value }}
            </div>
            <div
              style="
                font-family: PingFang SC;
                font-size: 16px;
                font-weight: bold;
                color: #ffa60e;
                cursor: pointer;
                font-style: italic;
                font-weight: bold;
              "
              :class="activeClass == 6 ? 'activeClass2' : ''"
              @click="handlePush('/discount', 6)"
            >
              <!-- <img
              src="../../static/Imgs/tjqc.png"
              style="width:70px "
              alt=""
            /> -->
              {{ homeCd[6].value }}
            </div>
          </div>
        </div>
        <div class="bottomsearch">
          <el-input
            v-model="input"
            placeholder="试试搜：旗袍"
            style="width: 2.07rem"
            @input="change($event)"
          ></el-input>
          <img src="../../static/Imgs/search.png" alt="" class="search" />

          <div class="searchbutton" @click="query">
            <img src="../../static/Imgs/bigsearch.png" alt="" class="search" />
          </div>
        </div>
      </div>
    </div>
    <div class="mianbox" v-if="adObj">
      <Nav></Nav>
      <router-link
      style="font-size: 1px;"
        :to="{
          path: '/highshop',
          query: {
            id: adObj.index_banner_up[0].storeId,
          },
        }"
        target="_blank"
      >
        <img
          :src="adObj.index_banner_up[0].imageUrl"
          alt="banner"
          style="
            cursor: pointer;
            width: 100vw;
            max-height: 1.2rem;
            cursor: pointer;
          "
        />
      </router-link>

      <div class="gonggao" v-if="sliderData[0].flag">
        <HorizontalTextSlider
         
          :message="sliderData[0].title"
        />
      </div>
      <Search></Search>
      <div class="banner">
        <div class="toptitle">
          <div
            class="blacktitle"
            :class="activeClass == 0 ? 'activeClass' : ''"
            @click="handlePush('/home', 0)"
          >
            {{ homeCd[0].value }}
          </div>
          <div
            class="blacktitle"
            :class="activeClass == 1 ? 'activeClass' : ''"
            @click="handlePush('/commodity', 1)"
          >
            {{ homeCd[1].value }}
          </div>
          <div
            class="blacktitle"
            :class="activeClass == 2 ? 'activeClass' : ''"
            @click="handlePush('/seasonnew', 2)"
          >
            {{ homeCd[2].value }}
          </div>
          <div
            class="blacktitle"
            :class="activeClass == 3 ? 'activeClass' : ''"
            @click="handlePush('/seasonselling', 3)"
          >
            {{ homeCd[3].value }}
          </div>
          <div
            @click="handlePush('/live', 4)"
            style="
              font-family: PingFang SC;
              font-size: 18px;
              font-weight: 900;
              color: #4479fd;
              display: flex;
              justify-content: center;
              align-items: center;
              cursor: pointer;
            "
            :class="activeClass == 4 ? 'activeClass3' : ''"
          >
            <img
              src="../../static/Imgs/tv.png"
              alt=""
              style="margin-right: 0.08rem; cursor: pointer"
            />
            {{ homeCd[4].value }}
          </div>
          <div
            style="
              font-family: PingFang SC;
              font-size: 18px;
              font-weight: bold;
              color: #dccd20;
              cursor: pointer;
              font-style: italic;
            "
            :class="activeClass == 5 ? 'activeClass2' : ''"
            @click="handlePush('/integrity', 5)"
          >
            <!-- <img
              src="../../static/Imgs/cxsj.png"
              style="width: 80px"
              alt=""
            /> -->
            {{ homeCd[5].value }}
          </div>
          <div
            style="
              font-family: PingFang SC;
              font-size: 18px;
              font-weight: bold;
              color: #ffa60e;
              cursor: pointer;
              font-style: italic;
            "
            :class="activeClass == 6 ? 'activeClass2' : ''"
            @click="handlePush('/discount', 6)"
          >
            <!-- <img
              src="../../static/Imgs/tjqc.png"
              style="width: 80px"
              alt=""
            /> -->
            {{ homeCd[6].value }}
          </div>
        </div>
      </div>

      <el-main>
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </el-main>

      <div class="fotter">
        <Footer></Footer>
      </div>
    </div>
  </div>
</template>

<script>
import { getAllAd, selectSystemSettingInfoByName } from "../../api/home/index";
import Nav from "../../components/Nav/Nav.vue";
import Search from "../../components/Search/Search.vue";
import Footer from "../../components/bottom/index.vue";
import HorizontalTextSlider from "@/components/HorizontalTextSlider";
export default {
  components: {
    Nav,
    Search,
    Footer,
    HorizontalTextSlider,
  },

  data() {
    return {
      sliderData: [
        {
          title: "",
          flag: false,
        },
      ],
      keepAliveList: ["home.vue"],
      activeClass: 0,
      adObj: false,
      show: false,
      scrollTop: 0,
      input: "",
      homeCd: [
        {
          value: "",
        },
        {
          value: "",
        },
        {
          value: "",
        },
        {
          value: "",
        },
        {
          value: "",
        },
        {
          value: "",
        },
        {
          value: "",
        },
        {
          value: "",
        },
      ],
    };
  },

  created() {
    this.getAllAd();
    this.selectSystemSettingInfoByName();
    this.selectSystemSettingInfoByNameB();
    const path = this.$route.path;
    if (path == "/home") {
      this.activeClass = 0;
    } else if (path == "/commodity") {
      this.activeClass = 1;
    } else if (path == "/seasonnew") {
      this.activeClass = 2;
    } else if (path == "/seasonselling") {
      this.activeClass = 3;
    } else if (path == "/live") {
      this.activeClass = 4;
    } else if (path == "/integrity") {
      this.activeClass = 5;
    } else if (path == "/discount") {
      this.activeClass = 6;
    }
  },
  mounted() {
    window.addEventListener("scroll", this.scrolling, true);
  },
  methods: {
    //获取首页广告语
    selectSystemSettingInfoByNameB() {
      selectSystemSettingInfoByName({
        keyWord: "首页菜单",
      }).then((data) => {
        this.homeCd = JSON.parse(data.data.value);
        console.log(this.homeCd);
      });
    },
    //获取公告
    selectSystemSettingInfoByName() {
      selectSystemSettingInfoByName({
        keyWord: "公告",
      }).then((data) => {
        this.ggForm = data.data;
        this.sliderData[0] = {
          title: data.data.value,
          flag: data.data.flag,
        };
        // this.sliderData[1] = {
        //   title: data.data.value,
        //   flag: data.data.flag,
        // };
        // for(let i=0;i<10;i++){
        //   this.sliderData[i] = {
        //   title: data.data.value,
        //   flag: data.data.flag,
        // };
        // }
        console.log(data.data, this.sliderData[0].title.length, "我是数据");
        this.$forceUpdate();
      });
    },
    // 搜索商品
    query() {
      this.$router.push({
        path: "/commodity",
        query: {
          goodsName: this.input,
        },
      });
    },
    change(e) {
      this.$forceUpdate();
    },
    scrolling() {
      this.scrollTop = document.body.querySelector("#app").scrollTop;
      if (this.scrollTop > 280) {
        this.show = true;
      } else {
        this.show = false;
      }
    },
    // 获取广告
    getAllAd() {
      getAllAd({
        adType: 0,
        adPosition: "index_banner_up",
      }).then((data) => {
        this.adObj = data.data;
      });
    },
    handlePush(url, index) {
      if (index != this.activeClass) {
        this.activeClass = index;
        this.$router.push(url);
      }
    },
  },
  watch: {
    $route() {
      const path = this.$route.path;
      if (path == "/home") {
        this.activeClass = 0;
      } else if (path == "/commodity") {
        this.activeClass = 1;
      } else if (path == "/seasonnew") {
        this.activeClass = 2;
      } else if (path == "/seasonselling") {
        this.activeClass = 3;
      } else if (path == "/live") {
        this.activeClass = 4;
      } else if (path == "/integrity") {
        this.activeClass = 5;
      } else if (path == "/discount") {
        this.activeClass = 6;
      }
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-main {
  width: 100vw;
  padding: 0;
}
::v-deep .el-carousel__arrow--left {
  border-radius: 0 0.2rem 0.2rem 0 !important;
  left: 0;
}
::v-deep .el-carousel__arrow--right {
  border-radius: 0.2rem 0 0 0.2rem !important;
  right: 0;
}
.main {
  width: 100%;
  // height: 100%;
  background-color: #f5f7f9;
  // overflow-x: hidden;
  .newHeaderBox {
    width: 100%;
    background: #fff;
    position: fixed;
    top: 0;
    display: flex;
    justify-content: center;
    z-index: 9999999;
    .contentBoix {
      display: flex;
      justify-content: space-between;
      width: 14rem;
      padding: 0.1rem 0;
      align-items: center;
      .topImg {
        cursor: pointer;
        width: 1.2rem;
      }
      .toptitle {
        margin: 0 auto;
        width: 10rem;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .blacktitle {
          font-family: PingFang SC;
          font-size: 16px;
          font-weight: bold;
          padding: 0.1rem 0.3rem;
          cursor: pointer;
        }
        .activeClass3 {
          padding: 0 10px;
          background: #e22a1f;
          color: white !important;
        }
        .activeClass {
          color: white !important;
          background: #e22a1f;
        }
        .activeClass2 {
          background: #e22a1f;
          color: #fff !important;
          padding: 5px 10px;
        }
      }
      /deep/ .el-input__inner {
        padding: 0 0.35rem;
      }
      .bottomsearch {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        display: flex;
        height: 0.46rem;

        .search {
          position: absolute;
          top: 0.7vw;
          left: 0.5vw;
        }
        ::v-deep .el-input__inner {
          border-radius: 0;
        }

        .searchbutton {
          cursor: pointer;
          position: relative;
          width: 0.32rem;
          height: 0.32rem;
          background-color: #e22a1f;
          border: 0.01rem solid rgba(0, 0, 0, 0);
          .search {
            width: 0.14rem;
            height: 0.14rem;
            position: absolute;
            top: 0.1rem;
            left: 0.1rem;
          }
        }
      }
    }
  }
  .mianbox {
    margin: 0 auto;
    width: 14rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .gonggao {
      width: 100vw;
      font-size: 16px;
      background: #fff;
      display: flex;
      justify-content: center;
      // padding: 10px 0;
      .ggContent {
        width: 1200px;
      }
    }
    .banner {
      width: 100vw;
      background-color: #fff;
      .toptitle {
        margin: 0 auto;
        margin-top: 0.1rem;
        width: 12rem;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .blacktitle {
          font-family: PingFang SC;
          font-size: 18px;
          font-weight: bold;
          cursor: pointer;
          padding: 0.1rem 0.3rem;
        }
        .activeClass3 {
          padding: 0 10px;
          background: #e22a1f;
          color: white !important;
        }
        .activeClass {
          color: white !important;
          background: #e22a1f;
        }
        .activeClass2 {
          background: #e22a1f;
          color: #fff !important;
          padding: 5px 10px;
        }
      }
    }
    .fotter {
      width: 100vw;
      background-color: #fff;
    }
  }
}
</style>
<style scoped lang="scss">
@media screen and (max-width: 1300px) {
  .mianbox {
    width: 90% !important;
  }
  .toptitle {
    width: 90% !important;
  }
  .newHeaderBox {
    width: 100%;
    background: #fff;
    position: fixed;
    top: 0;
    display: flex;
    justify-content: center;
    z-index: 9999999;
    .banner {
      width: 12rem;
    }
    .contentBoix {
      display: flex;
      justify-content: space-between;
      width: 16rem !important;
      padding: 0.1rem 0;
      align-items: center;
      .topImg {
        cursor: pointer;
        width: 1.5rem !important;
      }
      .toptitle {
        margin: 0 auto;
        width: 12rem;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .blacktitle {
          font-family: PingFang SC;
          font-size: 18px;
          font-weight: bold;
          cursor: pointer;
          padding: 0.1rem 0.3rem;
        }

        .activeClass3 {
          padding: 0 10px;
          background: #e22a1f;
          color: white !important;
        }
        .activeClass {
          color: white !important;
          background: #e22a1f;
        }
        .activeClass2 {
          background: #e22a1f;
          color: #fff;
          padding: 5px 10px;
        }
      }
      /deep/ .el-input__inner {
        padding: 0 0.35rem;
        height: 0.35rem !important;
        font-size: 0.12rem;
      }
      .bottomsearch {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        display: flex;
        height: 0.46rem;

        .search {
          position: absolute;
          top: 0.7vw;
          left: 0.5vw;
          width: 1vw;
        }
        .searchbutton {
          cursor: pointer;
          position: relative;
          width: 0.3rem;
          height: 0.3rem;
          background-color: #e22a1f;
          border: 0.01rem solid rgba(0, 0, 0, 0);
          .search {
            width: 0.14rem;
            height: 0.14rem;
            position: absolute;
            top: 0.1rem;
            left: 0.1rem;
          }
        }
      }
    }
  }
}
</style>
